<template>
	<view>
		<view class="payHead">
			<view class="payFont">订单金额</view>
			<view class="payPrice">￥{{ price }}</view>
		</view>

		<view class="payClass">
			<view class="item">
				<view class="itemLeft">选择支付方式</view>
				<view></view>
			</view>
			
			<view v-if="id">
				<view   v-for="(item, index) in paymentList" :key="index" class="item">
					<view class="itemLeft">
						<image :src="item.url"></image>
						<text>{{ item.text }}</text>
					</view>
					<view @click="selectedPay(index)" class="itemRight">
						<image v-if="payment == index" src="/static/images/pitch-on.png"></image>
						<image v-else src="/static/images/unselected.png"></image>
					</view>
				</view>
			</view>
			
			<view v-else>
				<view  v-for="(item, index) in memberList" :key="index" class="item">
					<view class="itemLeft">
						<image :src="item.url"></image>
						<text>{{ item.text }}</text> 
					</view>
					<view @click="selectedMemberPay(index)" class="itemRight">
						<image v-if="payment == index" src="/static/images/pitch-on.png"></image>
						<image v-else src="/static/images/unselected.png"></image>
					</view>
				</view>
			</view>
			
			
		</view>

		<view @click="submitPay" class="payBtn">确认支付</view>
	</view>
</template>

<script>
export default {
	data() { 
		return {
			paymentList: [
				{
					text: '账户余额',
					url:'/static/images/balance.png'
				},
				{
					text: '微信支付',
					url:'/static/images/weixin.png'
				}
				// {
				// 	text: '支付宝支付',
				// 	url:'/static/images/zhifubao.png'
				// }
			],
			memberList: [
				{
					text: '账户余额',
					url:'/static/images/balance.png'
				},
				{
					text: '微信支付',
					url:'/static/images/weixin.png'
				},
				
				// {
				// 	text: '支付宝支付',
				// 	url:'/static/images/zhifubao.png'
				// }
				
			],
			payment: 0,
			payStatus:false,
			price:'',// 价格
			id:'',// 任务id
			type:'balance', // 任务支付类型  balance 余额  wxpay 余额
			welfareId:'' // 福利套餐Id
		};
	},
	onLoad(e) {
		this.price = e.price
		this.id = e.id
		this.welfareId = e.welfare
	},
	methods: {
		// 选择任务支付方式
		selectedPay(index) {
			this.payment = index;
			switch (this.payment) {
				case 0:
					this.type = 'balance';
					break;
				case 1:
					this.type = 'app';
					break;
				case 2:
					this.type = 'Alipay';
					break;
			}
		},
		
		// 选择会员支付方式
		selectedMemberPay(index) {
			this.payment = index;
		},
		
		// 任务支付
		taskToPay() {
			let that = this
			if (that.payStatus) {
				that.$common.errorToShow('请不要重复支付')
				return;
			}
			that.payStatus = true;
			that.$api.balancePayment({
				id:that.id,
				type:that.type
			},res => {
				if(res.status == 200) {
					
					switch (that.payment) {
						case 0:
							that.$common.successToShow('支付成功');
							uni.redirectTo({
								url:'/pages/users/mission_list/mission_list?issue=1'
							});
							break;
						case 1:
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: {
								appid: res.data.result.config.appid,
								noncestr: res.data.result.config.noncestr,
								package: res.data.result.config.package,
								partnerid: res.data.result.config.partnerid,
								prepayid: res.data.result.config.prepayid,
								timestamp: res.data.result.config.timestamp,
								sign: res.data.result.config.sign
							},
							success: function(data) {
								that.$common.successToShow('支付成功');
								uni.redirectTo({
									url:'/pages/users/mission_list/mission_list?issue=1'
								});
							},
							fail: function(err) {
								that.$common.errorToShow(err)
							}
						});
							break;
						case 2:
							that.$common.errorToShow('暂未开通,请先使用微信支付')
							break;
					}
				}else {
					that.$common.errorToShow(res.message)
				}
				that.$common.loadToHide();
				that.payStatus = false;
			})
		},
		
		// 会员支付
		memberToPay() {
			let that = this
			if (that.payment == 1) {
				that.$common.loadToShow('正在支付');
				if (that.payStatus) {
					that.$common.errorToShow('请不要重复支付')
					return;
				}
				that.payStatus = true;  
				that.$api.rechargeVip({
					price:that.price,
					type: 'app',
					combination_id:that.welfareId
				}, res => {
					if (res.status == 200) {
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: {
								appid: res.data.data.appid,
								noncestr: res.data.data.noncestr,
								package: res.data.data.package,
								partnerid: res.data.data.partnerid,
								prepayid: res.data.data.prepayid,
								timestamp: res.data.data.timestamp,
								sign: res.data.data.sign
							},
							success: function(data) {
								that.$common.successToShow('支付成功');
								uni.switchTab({
									url:'/pages/member/index'
								});
							},
							fail: function(err) {}
						});
					} else {
						that.$common.errorToShow('支付失败')
					}
					that.$common.loadToHide();
					that.payStatus = false;
				});
			}else {
				that.$api.rechargeVip({
					price:that.price,
					type: 'balance',
					combination_id:that.welfareId
				},res => {
					if(res.status == 200) {
						that.$common.successToShow('支付成功');
						uni.switchTab({
							url:'/pages/member/index'
						});
					}else {
						that.$common.errorToShow(res.message)
					}
					that.$common.loadToHide();
					that.payStatus = false;
				})
				// that.$common.errorToShow('暂未开通,请先使用微信支付')
			}
		},
		
		// 余额支付
		balancePay() {
			this.$common.loadToShow('正在支付');
			if (this.payStatus) {
				return;
			}
			this.payStatus = true;
			if(this.id) {
				// 任务余额支付
				this.$api.balancePayment({
					id:this.id,
					type:this.type
				},res => {
					if(res.status == 200) {
						this.payStatus = false;
						this.$common.successToShow(res.message)
						uni.redirectTo({
							url: `/pages/users/mission_list/mission_list?issue=1`
						});
					}
					if(res.status == 400) {
						this.$common.errorToShow(res.message)
					}
					this.$common.loadToHide();
				})
			}else {
				// 会员余额支付
				this.$api.rechargeVip({
					price:this.price,
					type: 'balance',
					combination_id:this.welfareId
				},res => {
					if(res.status == 200) {
						this.$common.successToShow('支付成功');
						uni.switchTab({
							url:'/pages/member/index'
						});
					}else {
						this.$common.errorToShow(res.message)
					}
					this.$common.loadToHide();
					this.payStatus = false;
					// this.$common.loadToHide();
				})
			}
			
		},
		submitPay() {
			// #ifdef H5
			if(this.payment == 0) {
				this.balancePay()
				// this.$common.loadToShow('正在支付');
				// if (this.payStatus) {
				// 	return;
				// }
				// this.payStatus = true;
				// this.$api.balancePayment({
				// 	id:this.id,
				// 	type:this.type
				// },res => {
				// 	if(res.status == 200) {
				// 		this.payStatus = false;
				// 		this.$common.successToShow(res.message)
				// 		uni.redirectTo({
				// 			url: `/pages/users/mission_list/mission_list?issue=1`
				// 		});
				// 	}
				// 	if(res.status == 400) {
				// 		this.$common.errorToShow(res.message)
				// 	}
				// 	this.$common.loadToHide();
				// })
			}else {
				this.$common.errorToShow('请在App支付')
			}
			// #endif 
			
			// #ifdef APP-PLUS || APP-PLUS-NVUE
			if(this.id) {
				// 任务支付
				this.taskToPay()
			}else {
				// 会员支付
				this.memberToPay()
			}
			// #endif
		}
	}
};
</script>

<style lang="less">
.payHead {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100rpx;
	margin: 20rpx 0;
	background-color: #ffffff;
	padding: 0 20rpx;
	font-size: 30rpx;
	.payPrice {
		color: #cfa972;
		font-size: 35rpx;
	}
}
.payClass {
	background-color: #ffffff;
	padding: 0 20rpx;
	font-size: 30rpx;
	.item:last-child {
		border-bottom: none;
	}
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		border-bottom: 1rpx solid #ececec;
		.itemLeft {
			image {
				width: 40rpx;
				height: 35rpx;
				vertical-align: middle;
				margin-right: 10rpx;
			}
			text {
				vertical-align: middle;
			}
		}
		.itemRight {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
}
.payBtn {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100rpx;
	background: linear-gradient(90deg, #ff8444, #ff4242);
	font-size: 37rpx;
	color: #ffffff;
	text-align: center;
	line-height: 100rpx;
}
</style>
